<template>
	<view class="content">
		<view class="btn-scan" hover-class="btn-hover">
			<u-icon name="scan" size="120rpx" label="点击扫码" labelPos="button" color="#fff" labelColor="#fff"
				labelSize="40rpx" space="20rpx"></u-icon>
		</view>
		<view class="input-id">
			<text>远程充电</text>
			<view class="input-text">
				<u--input v-model="inputValue" placeholder="输入插排编号" shape="circle" inputAlign="center "></u--input>
			</view>
			<view class="" style="padding: 10rpx 30rpx;">
				<u-button type="success" text="确定"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: undefined
			};
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		padding: 150rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.btn-scan {
			width: 300rpx;
			height: 300rpx;
			background-color: #00b927;
			border-radius: 50%;
			box-shadow: 0rpx 0rpx 40rpx rgba(23, 231, 37, 0.6);
			text-align: center;
			padding: 50rpx;
			box-sizing: border-box;


		}

		.btn-hover {
			background-color: #00aa00;
		}

		.input-id {
			width: 100%;
			text-align: center;

			.input-text {
				margin: 20rpx 0;
			}

		}
	}
</style>